<template>
  <div>
    <!-- 新增按钮 -->
    <div class="btn"><el-button type="success" @click="addbase">新增</el-button></div>
    <!-- 数据表格展示区 -->
    <div class="table">
      <el-table style="width: 100%" :data="dataList">
        <el-table-column type="index" label="序号" align="center">
        </el-table-column>
        <el-table-column prop="name" label="名称" align="center">
        </el-table-column>
        <el-table-column label="值" align="center">
          <template slot-scope="scope">
            <el-image
              v-if="judgeHandler(scope.row.val) === true"
              :src="scope.row.val"
            ></el-image>
            <div v-else>{{scope.row.val}}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="介绍"
          prop="introduce"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              style="color: #67c23a"
              @click="edit(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="small"
              style="color: #f56c6c"
              @click="detele(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 模态框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      @close="dialogClose"
    >
      <!-- 表单区域 -->
      <!-- :model 表单对象 最终我们要提交的那个表单对象 -->
      <!-- :rules 表单验证的规则 -->
      <!-- ref 类比与 id 最终通过ref找到这张表单 -->
      <el-form
        :model="baseDataList"
        :rules="rules"
        ref="base_form"
        label-width="80px"
      >
        <!-- 产品名称 -->
        <el-form-item label="名称" prop="name">
          <el-input v-model="baseDataList.name"></el-input>
        </el-form-item>
        <!-- 介绍 -->
        <el-form-item label="介绍" prop="introduce">
          <el-input v-model="baseDataList.introduce"></el-input>
        </el-form-item>
        <!-- 类型 -->
        <el-form-item label="类型">
          <el-select v-model="baseDataList.region" clearable placeholder="文字">
            <el-option label="文字" value="文字"></el-option>
            <el-option label="图片" value="图片"></el-option>
          </el-select>
        </el-form-item>

        <!-- 值 -->
        <el-form-item label="值">
          <el-input
            v-if="baseDataList.region == '文字'"
            v-model="baseDataList.val"
            autocomplete="off"
          ></el-input>
          <el-upload
            v-else
            class="avatar-uploader"
            :action="uploadFileURL"
            :show-file-list="false"
            :on-success="handleSuccess"
            :before-upload="beforeUpload"
          >
            <img v-if="imageUrl" :src="baseDataList.val" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <!-- 底部操作按钮区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogClose">取 消</el-button>
        <!-- 提交表单后，调用一个提交表单的方法 -->
        <el-button type="primary" @click="submitForm"> 确 定 </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import {get,post} from '../../utils/request'
import { showFileURL, uploadFileURL } from "@/utils/config";
export default {
    data() {
    return {
      options: [
        {
          value: "选项1",
          label: "文字",
        },
        {
          value: "选项2",
          label: "图片",
        },
      ],
      value: "选项2",
      // 上传文件的服务器地址
      uploadFileURL,
      // 查询基础配置信息数组
      baseData: [],
      // 控制模态框的显示与隐藏
      dialogVisible: false,
      // 模态框的标题
      dialogTitle: "添加产品",
      // 表单验证规则
      rules: {
        // 产品名称
        name: [{ required: true, message: "请输入产品名称", trigger: "blur" }],
        // 封面
        introduce: [{ required: true, message: "请输入介绍", trigger: "blur" }],
      },
      imageUrl: "",
      //   提交表单数组
      baseDataList: {
        id: "",
        name: "",
        val: "",
        introduce: "",
        region: "",
      },
    };
  },

  computed: {
    ...mapState("basesystem", ["dataList"]),
  },
  methods: {
    ...mapActions("basesystem", ["getBaseconfig"]),
    handleSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      // 上传成功之后 更新this.baseDataList.val的路径
      this.baseDataList.val = showFileURL + res.data.id;
    },
    beforeUpload(file) {
      const isLt3M = file.size / 1024 / 1024 < 3;
      if (!isLt3M) {
        this.$message.error("上传头像图片大小不能超过 3MB!");
      }
    },
    // 提交表单
    submitForm() {
      this.$refs["base_form"].validate(async (valid) => {
        if (valid) {
          // 发送表单验证的请求 提交表单对象
          let res = await post("/baseConfig/saveOrUpdate", this.baseDataList);
          // 给用户一个成功的提示
          if (res.status == 200) {
            this.$message({
              message: res.message,
              type: "success",
            });
            // 重新刷新页面的数据
            this.getBaseconfig();
            // 调用关闭模态框的方法
            this.dialogClose();
          } else {
            this.$message.error(res.message);
          }
        } else {
          return false;
        }
      });
    },
    //判断val是否是图片地址还是文字
    judgeHandler(val){
      var bool;
      var sub = val.substring(val.lastIndexOf(".") + 1, val.length);
      if (sub === "jpg" || sub === "jpeg" || sub === "png" || sub == "gif") {
        bool = true;
      } else {
        bool = false;
      }
      return bool;
    },
    // 删除系统配置信息
     detele(id){
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          const res = await get("/baseConfig/deleteById", id)
          if (res.status == 200) {
            this.$message({
              type: 'success',
              message: res.message
            })
          } else {
            this.$message({
              type: 'danger',
              message: res.message
            })
          }
          // 刷新页面
          this.getBaseconfig()
        }).catch(() => {
          this.$message({
          type: 'success',
          message: '已取消删除'
        })
      })
  },
  //   编辑方法
    edit(row) {
      this.baseDataList.id = row.id;
      this.baseDataList.name = row.name;
      this.baseDataList.val = row.val;
      this.baseDataList.introduce = row.introduce;
      if (this.judgeHandler(row.val) == true) {
        this.baseDataList.region = "图片";
      } else {
        this.baseDataList.region = "文字";
      }
      this.imageUrl = this.baseDataList.val;
      // 设置模态框的标题
      this.dialogTitle = "编辑基础配置";
      // 打开模态框
      this.dialogVisible = true;
    },
    // 新增方法
    addbase() {
      // 清空表单对象
      this.baseDataList = {};

      this.baseform = {
        name: "",
        introduce: "",
        region: "",
        val: "",
      };

      // 将imageUrl 置空
      this.imageUrl = "";
      // 设置模态框的标题
      this.dialogTitle = "新增基础配置";
      // 模态框显示出来
      this.dialogVisible = true;
    },
  // 关闭模态框
    dialogClose() {
      // 清空表单对象
      this.dialogVisible = false;
    },
  },
  created() {
    this.getBaseconfig();
  },
};
</script>